<template>
  <div class="p-16px tables" v-loading="loadingList">
    <div>
      <el-date-picker
        @change="changeDate"
        v-model="date"
        type="daterange"
        size="large"
        :range-separator="$t('common.to')"
        :start-placeholder="$t('common.startDate')"
        :end-placeholder="$t('common.endDate')"
        :shortcuts="shortcuts"
      />
    </div>
    <div class="m-t20px w-100%">
      <div>
        <el-table :data="tableData.lists" height="calc(100vh - 200px)" style="width: 100%" size="large">
          <el-table-column type="expand">
            <template #default="props">
              <div>商品信息待完善</div>
            </template>
          </el-table-column>

          <el-table-column :label="$t('home.list.sn')" prop="sn" />

          <el-table-column :label="$t('home.list.source')">
            <template #default="scope">
              {{ showSource(scope.row.source) }}
            </template>
          </el-table-column>

          <el-table-column :label="$t('home.list.type')">
            <template #default="scope">
              {{ showType(scope.row.type) }}
            </template>
          </el-table-column>

          <el-table-column :label="$t('home.list.user')">
            <template #default="scope">
              {{ scope.row.operatorName || scope.row.username }}
            </template>
          </el-table-column>

          <el-table-column :label="$t('home.list.payWay')">
            <template #default="scope">
              {{ showPayWay(scope.row.payWay) }}
            </template>
          </el-table-column>

          <el-table-column :label="$t('home.list.total')" prop="payPrice" />

          <el-table-column :label="$t('home.list.time')" prop="createTime" />

          <el-table-column :label="$t('home.list.act')" width="250">
            <template #default="scope">
              <div>
                <el-button @click="print(1, scope.row)" :loading="printLoading">{{ $t('home.list.printMsg') }}</el-button>
              </div>
              <div class="m-t10px">
                <el-button :disabled="scope.row.type != 10" @click="print(0, scope.row)" :loading="printLoading">
                  {{ $t('home.list.printLabel') }}
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="m-t20px">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="tableData.meta.total"
          :page-size="tableData.meta.size"
          @current-change="changePage"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { useList } from '~/utils/page'
import { showPayWay, showType, showSource } from '~/utils/util'

const date = ref([new Date(), new Date()])

const { tableData, getList, loadingList, changePage, handleSizeChange } = useList(apis.api.employeeOrderOrders, false)
tableData.extra.startDate = dayjs(date.value[0]).format('YYYY-MM-DD')
tableData.extra.endDate = dayjs(date.value[1]).format('YYYY-MM-DD')
tableData.extra.type = cache.getShop().id

const shortcuts = [
  {
    text: '今天',
    value: () => {
      const end = new Date()
      const start = new Date()
      return [start, end]
    }
  },
  {
    text: '昨天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24)
      end.setTime(end.getTime() - 3600 * 1000 * 24)
      return [start, end]
    }
  },
  {
    text: '本周',
    value: () => {
      let now = new Date()
      let nowDayOfWeek = now.getDay() //今天本周的第几天
      let nowDay = now.getDate() //当前日
      let nowMonth = now.getMonth() //当前月
      let nowYear = now.getFullYear() //当前年

      const start = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
      const end = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek)

      return [start, end]
    }
  }
]

const printLoading = ref(false)

onMounted(() => {
  getList()
})

function changeDate() {
  tableData.extra.startDate = dayjs(date.value[0]).format('YYYY-MM-DD')
  tableData.extra.endDate = dayjs(date.value[1]).format('YYYY-MM-DD')
  getList()
}

function print(type: number, order: ApiOrders) {
  apis.api.employeeOrderRePrintOrder({ type: type, orderNum: order.orderNum! }, printLoading)
}
</script>
<style lang="scss" scoped>
.tables {
  width: calc(100vw - 96px);
}
// .ctx {
//   height: calc(100vh - 140px);
//   overflow-y: auto;
// }
</style>
